import BaseComponent from "../../app/baseComponent";
import { createSubpageComponent } from "../page.component";
import { AUIModal } from "./modal.component";

class UiExampleModal extends BaseComponent {
    constructor(name) {
        super(name);
        this.methods = {
            show(ref) {
                var self = this;       
                self.$refs[ref].show();    
            }
        }
    }
    _template() {
        var self = this;
        return `<div class="${self._name}">
    <button @click="show('modal1')">openModal</button>  
    <button @click="show('modal2')">openAction</button>  
    <button @click="show('modal3')">openAside</button>  
    <aui-modal class="aui-modal--default" ref="modal1">
        <div slot="title">aui-Modal Header</div>
        <div slot="body">aui-Modal body</div>
        <div slot="footer">aui-Modal Footer</div>
    </aui-modal>
    <aui-modal class="aui-modal--action" ref="modal2">
        <div slot="title">aui-Modal Header</div>
        <div slot="body">aui-Modal body</div>
        <div slot="footer">aui-Modal Footer</div>    
    </aui-modal>
    <aui-modal class="aui-modal--aside" ref="modal3">    
        <div slot="title">aui-Modal Header</div>
        <div slot="body">aui-Modal body</div>
        <div slot="footer">aui-Modal Footer</div>    
    </aui-modal>    
</div>`;
    }
    _mounted() {
        var self = this;
        
    }
    _data() {
        var ret = {};
        return ret;
    }  
}

AUIModal.install();
window.AUICustomComponents.define("ui-example-modal", UiExampleModal);

export default createSubpageComponent(
    `<ui-example-modal></ui-example-modal>`
);